<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>web-marker demo</title>
<link rel="stylesheet" type="text/css" href="./web-marker.css" />
<style>
  body{
    background-color: #f2f2f2;
    color: #666;
  }
  h1{
    padding: 0;
    margin: 0;
    color: #333;
    text-align: center;
  }
  ul{
    padding: 20px;
    margin: 0;
    line-height: 25px;
  }
  li{
    margin-bottom: 10px;
  }
  .main{
    background-color: #fff;
    border: 1px solid #eee;
    margin: auto;
    padding: 30px;
    width: 80%;
    margin-top: 100px;
    border-radius: 5px;
  }
  a{
    color: #3fb3fc;
  }
</style>
</head>

<body>
  <div id="main" class="main">
    <h1>web-marker 演示</h1>
    <ul>
      <li> 获取选中文本信息; </li>
      <li> 主要用于<span class="_web_marker">在静态网页上做标记(高亮)<span class="_mark_web_maker">这是一段批注内容</span></span>, 当然前提是网页上的内容不会发生变化, 一旦发生变化之前做的标记将会错乱;</li>
      <li> 当然也可作为简单的文本选中工具;</li>
      <li> 暂不支持跨多节点标记内容;</li>
      <li> 支持移动端, 但因在移动端选中文字后系统会有默认的弹框操作, 所以得让小伙伴在webView里把这个系统功能禁用掉;</li>
      <li> 可根据需求添加想要的操作按钮,具体使用方法参考: demo/index.html; </li>
      <li> 样式可自定义, 写法参考: demo/web-marker.css;</li>
      <li> 标记内容可存在本地或者服务器，格式为getAllMarkes()返回内容, demo是储存在localStorage的;</li>
    </ul>
    github地址: <a target="_blank" href="https://github.com/cashon1120/web-marker-ts">https://github.com/cashon1120/web-marker-ts</a>
  </div>
  <script src="./web_marker.js"></script>
  <script>
    // 默认标记数据
    let defaultMarkers = JSON.parse(localStorage.getItem('markers'))
    // 创建实例, npm 安装使用的话 直接 new WebMarker({...})
    const webMarker = new WebMarker({
      defaultMarkers: defaultMarkers, // 默认标记数据 (选填), 数据格式为 getAllMarkes 返回结果
      selectedClassName: '_temp_marker', // 选中后样式名 (必填)
      markedClassName: '_web_marker', // 标记样式名 (必填)
      focusMarkedClassName: '_focus_web_marker', // 选中已标记样式名 (必填)
      btnWrapperID: 'webMarkerBtn_Wrapper', // 弹框节点 ID (必填)
      disabledDom: ['BUTTON', 'H1', 'H2', 'IMG'], // 禁用此功能标签 (选填)
      btns: [{
        label: '标记',
        event: () => {
          webMarker.mark()
          // 如果需要保存在本地的话可自行处理， 如：
          // const markersJson = JSON.stringify(webMarker.getAllMarkes())
          // localStorage.setItem('markers', markersJson)
        }
      },{
        label: '百科',
        event: () => {
          // 获取当前选中的文本内容
          const text = webMarker.getSelectedText()
          window.location.href = `https://baike.baidu.com/search/none?word=${text}`
        }
      },{
        label: '全部标记信息',
        event: () => {
          const allText = webMarker.getAllMarkers()
          console.log(allText)
        }
      }, {
        label: '当前标记ID',
        event: () => {
          const id = webMarker.getCurrentId()
          console.log(id)
        }
      },{
        label: '删除',
        event: () => {
          webMarker.del()
        }
      }]
    })
  </script>


</body>

</html>
